@@include('include/header.html', {"name": "tab","desc": "选项卡"})

<section id="tab">
	<div class="demo-item">
		<p class="demo-desc">标签栏</p>
		<div class="demo-block">
			<div class="ui-tab">
			    <ul class="ui-tab-nav ui-border-b">
			        <li class="current">热门推荐</li>
			        <li>全部表情</li>
			        <li>表情</li>
			    </ul>
			    <ul class="ui-tab-content" style="width:300%">
			        <li>内容1</li>
			        <li>内容2</li>
			        <li>内容3</li>
			    </ul>
			</div>
		</div>
		<script class="demo-script">
		(function (){
            var tab = new fz.Scroll('.ui-tab', {
		        role: 'tab',
		        autoplay: true,
		        interval: 3000
		    });
		    /* 滑动开始前 */
		    tab.on('beforeScrollStart', function(fromIndex, toIndex) {
		        console.log(fromIndex,toIndex);// from 为当前页，to 为下一页
		    })
		})();
        </script>
	</div>
</section>
@@include('include/footer.html')